<!DOCTYPE html>
<html>
<head hexo-theme='https://volantis.js.org/#3.0-beta2'>
  <meta charset="utf-8">
  <!-- SEO相关 -->
  
    
  
  <!-- 渲染优化 -->
  <meta name="renderer" content="webkit">
  <meta name="force-rendering" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="HandheldFriendly" content="True" >
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <!-- 页面元数据 -->
  
  <title>uni-app 开发之路 - 河豚吞吞</title>
  
    <meta name="keywords" content="uni-app">
  

  
    <meta name="description" content="Everything goes back to the way it was.">
  

  <!-- feed -->
  

  <!-- import meta -->
  
    
      <meta name="msapplication-TileColor" content="#ffffff">
    
      <meta name="msapplication-config" content="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/browserconfig.xml">
    
      <meta name="theme-color" content="#ffffff">
    
  

  <!-- link -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13/css/all.min.css">
  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">


  
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.css">

  

  

  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
  

  

  <!-- import link -->
  
  
  <link rel="apple-touch-icon" sizes="180x180" href="/lemonElf/img/icon/icon001.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/lemonElf/img/icon/icon001.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/lemonElf/img/icon/icon001.png">
  <link rel="manifest" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/favicon/site.webmanifest">
  <link rel="mask-icon" href="/lemonElf/img/icon/icon001.png" color="#5bbad5">
  <link rel="shortcut icon" href="/lemonElf/img/icon/icon001.png">
  

  
  
    
<link rel="stylesheet" href="/lemonelf/css/style.css">

  

  
  
</head>

<body>
  
  
  
  <div class="cover-wrapper">
    <cover class='cover post' style="display: none;">
      <div class='cover-body'>
  <div class='a'>
    
    
      <p class="title">MissGlobeFish</p>
    
    
      <p class="subtitle">When the world turns its back on you, you turn your back on the world! And only embrace whats next!</p>
    
  </div>
  <div class='b'>
    <div class='menu navigation dock'>
      <div class='list-h'>
        
          
            <a href="/lemonelf/"
              
              
              id="lemonelf">
              <img src='https://i.loli.net/2020/07/24/skczZ1VdMGRbTLi.png'><p>主页</p>
            </a>
          
            <a href="/lemonelf/archives/"
              
              
              id="lemonelfarchives">
              <img src='https://i.loli.net/2020/07/24/GaeXvVAdtJkCYT3.png'><p>归档</p>
            </a>
          
            <a href="/lemonelf/categories/"
              
              
              id="lemonelfcategories">
              <img src='https://i.loli.net/2020/07/24/9kHJZNA8m4RBxhp.png'><p>分类</p>
            </a>
          
            <a href="/lemonelf/friends/"
              
              
              id="lemonelffriends">
              <img src='https://i.loli.net/2020/07/24/cxRslyWzk2OTP9r.png'><p>友链</p>
            </a>
          
        
      </div>
    </div>
  </div>
</div>

      <div class="scroll-down" style="display: none;"><i class="fa fa-chevron-down scroll-down-effects"></i></div>
    </cover>
    <header class="l_header shadow blur">
  <div class='container'>
  <div class='wrapper'>
    <div class='nav-sub'>
      <p class="title"></p>
      <ul class='switcher nav-list-h' id="pjax-header-nav-list">
        <li><a class="s-comment fas fa-comments fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
          <li><a class="s-toc fas fa-list fa-fw" target="_self" href='javascript:void(0)'></a></li>
        
      </ul>
    </div>
		<div class="nav-main">
      
        
        <a class="title flat-box" target="_self" href='/lemonelf/'>
          
          
          
            MissGlobeFish
          
        </a>
      

			<div class='menu navigation'>
				<ul class='nav-list-h'>
          
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/categories/
                  
                  
                  
                    id="lemonelfcategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/tags/
                  
                  
                  
                    id="lemonelftags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/archives/
                  
                  
                  
                    id="lemonelfarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/friends/
                  
                  
                  
                    id="lemonelffriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
          
            
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/about/
                  
                  
                  
                    id="lemonelfabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
          
				</ul>
			</div>

      <div class="m_search">
        <form name="searchform" class="form u-search-form">
          <i class="icon fas fa-search fa-fw"></i>
          <input type="text" class="input u-search-input" placeholder="Search..." />
        </form>
      </div>

			<ul class='switcher nav-list-h'>
				
					<li><a class="s-search fas fa-search fa-fw" target="_self" href='javascript:void(0)'></a></li>
				
				<li>
          <a class="s-menu fas fa-bars fa-fw" target="_self" href='javascript:void(0)'></a>
          <ul class="menu-phone list-v navigation white-box">
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/categories/
                  
                  
                  
                    id="lemonelfcategories"
                  >
                  <i class='fas fa-folder-open fa-fw'></i>分类
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/tags/
                  
                  
                  
                    id="lemonelftags"
                  >
                  <i class='fas fa-tags fa-fw'></i>标签
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/archives/
                  
                  
                  
                    id="lemonelfarchives"
                  >
                  <i class='fas fa-archive fa-fw'></i>归档
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/friends/
                  
                  
                  
                    id="lemonelffriends"
                  >
                  <i class='fas fa-link fa-fw'></i>友链
                </a>
                
              </li>
            
          
            
              
            
              <li>
                <a class="menuitem flat-box" href=/lemonelf/about/
                  
                  
                  
                    id="lemonelfabout"
                  >
                  <i class='fas fa-info-circle fa-fw'></i>关于
                </a>
                
              </li>
            
          
            
          </ul>
        </li>
			</ul>
		</div>
	</div>
  </div>
</header>

  </div>
  


  <div class="l_body nocover">
    <div class='body-wrapper' id="pjax-container">
      
        <!--此文件用来存放一些不方便取值的变量-->
<!--思路大概是将值藏到重加载的区域内-->



<div id="pjax-data" style="display: none">
  <div id="pjax-ispage">true</div>
  <div id="pjax-pageTitle">uni-app 开发之路</div>
  <div id="pjax-enable-cover">true</div>
  <div id="pjax-permalink">https://missglobefish.gitee.io/lemonelf/2020/08/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF/</div>
  
  <div id="valine-path">none</div>
  <div id="valine-placeholder">none</div>
  
  
</div>


<script>
  // 处理封面 此时 jquery 还没加载
  if ("none" == "none") { // 移除封面
    document.getElementsByClassName('cover')[0].style.display = "none";
    document.getElementsByClassName('l_body')[0].classList.add("nocover");
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.add("show");
  } else {
    if ("none" == "blog") { // 半屏
      document.getElementsByClassName('cover')[0].classList.remove("full");
      document.getElementsByClassName('cover')[0].classList.add("half");
      document.getElementsByClassName('scroll-down')[0].style.display = "none";
    } else if ("none" == "docs") { // 全屏
      document.getElementsByClassName('cover')[0].classList.remove("half");
      document.getElementsByClassName('cover')[0].classList.add("full");
      document.getElementsByClassName('scroll-down')[0].style.display = "";
    }
    document.getElementsByClassName('cover')[0].style.display = "";
    document.getElementsByClassName('l_body', 'show')[0].classList.remove("nocover");
    document.getElementsByClassName('l_header', 'cover-wrapper')[0].classList.remove("show");
  }
</script>

      
      

<div class='l_main'>
  

  
    <article id="post" class="post white-box reveal shadow article-type-post" itemscope itemprop="blogPost">
      


  <section class='meta'>
    
      
      
        <a title='uni-app 开发之路' href='/lemonelf/2020/08/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF/'><img class='thumbnail' src='https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png'></a>
      
      <div class="meta" id="header-meta">
        
          
  <h1 class="title">
    <a href="/lemonelf/2020/08/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF/">
      uni-app 开发之路
    </a>
  </h1>


        
        <div class='new-meta-box'>
          
            
          
            
              
<div class='new-meta-item author'>
  <a class='author' href="/" rel="nofollow">
    <img no-lazy src="https://pic4.zhimg.com/80/v2-52584915d42d676148e2c302f4e87382_hd.jpg">
    <p>MissGlobeFish</p>
  </a>
</div>

            
          
            
              
  
  <div class='new-meta-item category'>
    <a href='/lemonelf/categories/uni-app/' rel="nofollow">
      <i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>
      <p>uni-app</p>
    </a>
  </div>


            
          
            
              <div class="new-meta-item date">
  <a class='notlink'>
    <i class="fas fa-calendar-alt fa-fw" aria-hidden="true"></i>
    <p>发布于：2020-08-13</p>
  </a>
</div>

            
          
            
              

            
          
        </div>
        
          <hr>
        
      </div>
    
  </section>


      <section class="article typo">
        <div class="article-entry" itemprop="articleBody">
          
          
          <p>Everything goes back to the way it was.</p>
<a id="more"></a>

<blockquote>
<p><strong>1. 简介</strong></p>
</blockquote>
<p><code>uni-app</code> 是一个使用 <code>Vue.js</code> 开发所有前端应用的框架，开发者编写一套代码，可发布到 <code>iOS</code>、<code>Android</code>、<code>H5</code>、以及各种<code>小程序</code>（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。</p>
<p><img src="/lemonElf/img/studyImg/uni-app01.png" alt="uni-app01"></p>
<blockquote>
<p><strong>2. 创建、运行、发布</strong></p>
</blockquote>
<h5 id="1-通过-HBuilderX-可视化界面"><a href="#1-通过-HBuilderX-可视化界面" class="headerlink" title="1. 通过 HBuilderX 可视化界面"></a>1. 通过 HBuilderX 可视化界面</h5><p>HBuilderX：<a target="_blank" rel="noopener" href="https://www.dcloud.io/hbuilderx.html">官方IDE下载地址</a></p>
<h5 id="2-创建-uni-app"><a href="#2-创建-uni-app" class="headerlink" title="2. 创建 uni-app"></a>2. 创建 uni-app</h5><ol>
<li>在点击工具栏里的文件 -&gt; 新建 -&gt; 项目 ( 选择 uni-app 类型，输入工程名，选择模板，点击创建，即可成功创建。 )</li>
</ol>
<h5 id="3-运行-uni-app"><a href="#3-运行-uni-app" class="headerlink" title="3. 运行 uni-app"></a>3. 运行 uni-app</h5><ol>
<li>浏览器运行：进入 hello-uniapp 项目，点击工具栏的运行 -&gt; 运行到浏览器 -&gt; 选择浏览器，即可在浏览器里面体验 uni-app 的 H5 版。</li>
<li>真机运行：连接手机，开启USB调试，进入 hello-uniapp 项目，点击工具栏的运行 -&gt; 真机运行 -&gt; 选择运行的设备，即可在该设备里面体验 uni-app。</li>
<li>在微信开发者工具里运行：进入 hello-uniapp 项目，点击工具栏的运行 -&gt; 运行到小程序模拟器 -&gt; 微信开发者工具，即可在微信开发者工具里面体验 uni-app。</li>
</ol>
<h5 id="4-发布-uni-app"><a href="#4-发布-uni-app" class="headerlink" title="4. 发布 uni-app"></a>4. 发布 uni-app</h5><p>( 一 ) 打包为原生 App ( 云端 )</p>
<ol>
<li>在 HBuilderX 工具栏，点击发行，选择原生 app - 云端打包。</li>
</ol>
<p>( 二 ) 打包为原生 App ( 离线 ) </p>
<ol>
<li>在 HBuilderX 工具栏，点击发行，选择本地打包，如下图，点击即可生成离线打包资源。</li>
</ol>
<p>( 三 ) 发布为 H5</p>
<ol>
<li>在 manifest.json 的可视化界面，进行如下配置（ 发行在网站根目录可不配置应用基本路径 ），此时发行网站路径是 <a target="_blank" rel="noopener" href="http://www.xxx.com/h5%EF%BC%8C%E5%A6%82%EF%BC%9Ahttps://uniapp.dcloud.io/h5%E3%80%82">www.xxx.com/h5，如：https://uniapp.dcloud.io/h5。</a></li>
<li>在 HBuilderX 工具栏，点击发行，选择网站 - H5 手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。</li>
</ol>
<p>( 四 ) 发布为小程序</p>
<ol>
<li>申请微信小程序 AppID。</li>
<li>在 HBuilderX 中顶部菜单依次点击 “发行” =&gt; “小程序-微信”，输入小程序名称和 appid 点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。</li>
<li>在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” =&gt; “发布” 小程序标准流程，逐步操作即可。</li>
</ol>
<blockquote>
<p><strong>3. 目录结构</strong></p>
</blockquote>
<p><img src="/lemonElf/img/studyImg/uni-app02.png" alt="uni-app02"></p>
<blockquote>
<p><strong>4. 生命周期</strong></p>
</blockquote>
<h4 id="1-应用生命周期"><a href="#1-应用生命周期" class="headerlink" title="1. 应用生命周期"></a>1. 应用生命周期</h4><p>应用生命周期仅可在 <code>App.vue</code> 中监听，在其它页面监听无效。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">onLaunch: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 当 uni-app 初始化完成时触发（全局只触发一次）</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;App Launch&#x27;</span>)</span><br><span class="line">&#125;,</span><br><span class="line">onShow: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 当 uni-app 启动，或从后台进入前台显示</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;App Show&#x27;</span>)</span><br><span class="line">&#125;,</span><br><span class="line">onHide: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 当 uni-app 从前台进入后台</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;App Hide&#x27;</span>)</span><br><span class="line">&#125;,</span><br><span class="line">onError: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 当 uni-app 报错时触发</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;App Hide&#x27;</span>)</span><br><span class="line">&#125;,</span><br><span class="line">onUniNViewMessage: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="comment">// 对 nvue 页面发送的数据进行监听</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&#x27;App Hide&#x27;</span>)</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="2-页面生命周期"><a href="#2-页面生命周期" class="headerlink" title="2. 页面生命周期"></a>2. 页面生命周期</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line">onLoad() &#123;</span><br><span class="line">    <span class="comment">// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）        </span></span><br><span class="line">&#125;,</span><br><span class="line">onShow() &#123;</span><br><span class="line">    <span class="comment">// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面       </span></span><br><span class="line">&#125;,</span><br><span class="line">onReady() &#123;</span><br><span class="line">    <span class="comment">// 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发    </span></span><br><span class="line">&#125;,</span><br><span class="line">onHide() &#123;</span><br><span class="line">    <span class="comment">// 监听页面隐藏       </span></span><br><span class="line">&#125;,</span><br><span class="line">onUnload() &#123;</span><br><span class="line">    <span class="comment">// 监听页面卸载      </span></span><br><span class="line">&#125;,</span><br><span class="line">onResize() &#123;</span><br><span class="line">    <span class="comment">// 监听窗口尺寸变化。 ( App、微信小程序 )    </span></span><br><span class="line">&#125;,</span><br><span class="line">onPullDownRefresh() &#123;</span><br><span class="line">    <span class="comment">// 监听用户下拉动作，一般用于下拉刷新        </span></span><br><span class="line">&#125;,</span><br><span class="line">onReachBottom() &#123;</span><br><span class="line">    <span class="comment">// 页面上拉触底事件的处理函数        </span></span><br><span class="line">&#125;,</span><br><span class="line">onShareAppMessage() &#123;</span><br><span class="line">    <span class="comment">// 用户点击右上角分享。（ 微信小程序、百度小程序、字节跳动小程序、支付宝小程序 ）  </span></span><br><span class="line">&#125;,</span><br><span class="line">onPageScroll(e) &#123;</span><br><span class="line">    <span class="comment">// 监听页面滚动，参数为 Object 。（ nvue 暂不支持滚动监听，可用 bindingx 代替 ）</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;滚动距离为：&quot;</span> + e.scrollTop); <span class="comment">// 页面在垂直方向已滚动的距离（单位px）  </span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h4 id="3-组件生命周期"><a href="#3-组件生命周期" class="headerlink" title="3. 组件生命周期"></a>3. 组件生命周期</h4><p><code>uni-app</code> 组件支持的生命周期，与 <code>vue</code> 标准组件的生命周期相同。这里没有页面级的 <code>onLoad</code> 等生命周期：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">beforeCreate() &#123;</span><br><span class="line">    <span class="comment">// 在实例初始化之后被调用。        </span></span><br><span class="line">&#125;,</span><br><span class="line">created() &#123;</span><br><span class="line">    <span class="comment">// 在实例创建完成后被立即调用。      </span></span><br><span class="line">&#125;,</span><br><span class="line">beforeMount() &#123;</span><br><span class="line">    <span class="comment">// 在挂载开始之前被调用。</span></span><br><span class="line">&#125;,</span><br><span class="line">mounted() &#123;</span><br><span class="line">    <span class="comment">// 挂载到实例上去之后调用。</span></span><br><span class="line">    <span class="comment">// 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用 $nextTick       </span></span><br><span class="line">&#125;,</span><br><span class="line">beforeUpdate() &#123;</span><br><span class="line">    <span class="comment">// 数据更新时调用，发生在虚拟 DOM 打补丁之前。( 仅 H5 平台支持 )      </span></span><br><span class="line">&#125;,</span><br><span class="line">updated() &#123;</span><br><span class="line">    <span class="comment">// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。( 仅 H5 平台支持 )        </span></span><br><span class="line">&#125;,</span><br><span class="line">beforeDestroy() &#123;</span><br><span class="line">    <span class="comment">// 实例销毁之前调用。在这一步，实例仍然完全可用。        </span></span><br><span class="line">&#125;,</span><br><span class="line">destroyed() &#123;</span><br><span class="line">    <span class="comment">// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。        </span></span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>5. 页面函数</strong></p>
</blockquote>
<h5 id="1-getApp"><a href="#1-getApp" class="headerlink" title="1. getApp()"></a>1. getApp()</h5><p><code>getApp()</code> 函数用于获取当前应用实例，一般用于获取 <code>globalData</code> 。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> app = getApp()</span><br><span class="line"><span class="built_in">console</span>.log(app.globalData)</span><br></pre></td></tr></table></figure>
<p>【 注意 】：</p>
<ol>
<li>不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，可以通过 this.$scope 获取对应的 app 实例。</li>
<li>通过 getApp() 获取实例之后，不要私自调用生命周期函数。</li>
<li>v3 模式加速了首页 nvue 的启动速度，当在首页 nvue 中使用 getApp() 不一定可以获取真正的 App 对象。对此 v3 版本提供了 const app = getApp({allowDefault: true}) 用来获取原始的 App 对象，可以用来在首页对 globalData 等初始化。</li>
</ol>
<h5 id="2-getCurrentPages"><a href="#2-getCurrentPages" class="headerlink" title="2. getCurrentPages()"></a>2. getCurrentPages()</h5><p><code>getCurrentPages()</code> 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。</p>
<p>【 注意 】： getCurrentPages() 仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。</p>
<p>每个页面实例的方法属性列表：</p>
<table>
<thead>
<tr>
<th align="center">方法</th>
<th align="center">描述</th>
<th align="center">平台说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">page.$getAppWebview()</td>
<td align="center">获取当前页面的 webview 对象实例</td>
<td align="center">App</td>
</tr>
<tr>
<td align="center">page.route</td>
<td align="center">获取当前页面的路由</td>
<td align="center"></td>
</tr>
</tbody></table>
<p>【 Tips 】：</p>
<ol>
<li>navigateTo, redirectTo 只能打开非 tabBar 页面。</li>
<li>switchTab 只能打开 tabBar 页面。</li>
<li>reLaunch 可以打开任意页面。</li>
<li>页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。</li>
<li>不能在 App.vue 里面进行页面跳转。</li>
</ol>
<h5 id="3-getAppWebview"><a href="#3-getAppWebview" class="headerlink" title="3. $getAppWebview()"></a>3. $getAppWebview()</h5><p><code>uni-app</code> 在 <code>getCurrentPages()</code> 获得的页面里内置了一个方法 <code>$getAppWebview()</code> 可以得到当前 <code>webview</code> 的对象实例，从而实现对 <code>webview</code> 更强大的控制。<br>在 <code>html5Plus</code> 中，<code>plus.webview</code> 具有强大的控制能力。</p>
<p>但 <code>uni-app</code> 框架有自己的窗口管理机制，请不要自己创建和销毁 <code>webview</code>，如有需求覆盖子窗体上去，请使用原生子窗体 <code>subNvue</code>。</p>
<p>【 注意 】：此方法仅 App 支持。</p>
<p>获取当前页面 <code>webview</code> 的对象实例: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">data() &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">    title: <span class="string">&#x27;Hello&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;,</span><br><span class="line">onLoad() &#123;</span><br><span class="line">    <span class="comment">// 此对象相当于 html5plus 里的 plus.webview.currentWebview()。</span></span><br><span class="line">    <span class="comment">// 在 uni-app 里 vue 页面直接使用 plus.webview.currentWebview() 无效，非 v3 编译模式使用 this.$mp.page.$getAppWebview()</span></span><br><span class="line">    <span class="comment">// #ifdef APP-PLUS</span></span><br><span class="line">    <span class="keyword">const</span> currentWebview = <span class="built_in">this</span>.$scope.$getAppWebview(); </span><br><span class="line"></span><br><span class="line">    <span class="comment">// 动态重设 bounce 效果</span></span><br><span class="line">    currentWebview.setBounce( &#123; <span class="attr">position</span>:&#123; <span class="attr">top</span>: <span class="string">&#x27;100px&#x27;</span> &#125;, <span class="attr">changeoffset</span>:&#123; <span class="attr">top</span>: <span class="string">&#x27;0px&#x27;</span> &#125; &#125; ); </span><br><span class="line">    <span class="comment">// #endif</span></span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>获取指定页面 <code>webview</code> 的对象实例: </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// getCurrentPages() 可以得到所有页面对象，然后根据数组，可以取指定的页面 webview 对象</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> pages = getCurrentPages();</span><br><span class="line"><span class="keyword">var</span> page = pages[pages.length - <span class="number">1</span>];</span><br><span class="line"></span><br><span class="line"><span class="comment">// #ifdef APP-PLUS</span></span><br><span class="line"><span class="keyword">var</span> currentWebview = page.$getAppWebview();</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(currentWebview.id); <span class="comment">// 获得当前 webview 的 id</span></span><br><span class="line"><span class="built_in">console</span>.log(currentWebview.isVisible()); <span class="comment">// 查询当前 webview 是否可见</span></span><br><span class="line"><span class="comment">// #endif</span></span><br></pre></td></tr></table></figure>
<p><code>uni-app</code> 自带的 <code>web-view</code> 组件，是页面中新插入的一个子 <code>webview</code>。</p>
<blockquote>
<p><strong>6. 路由跳转</strong></p>
</blockquote>
<p><code>uni-app</code> 有两种页面路由跳转方式：</p>
<h5 id="1-使用-navigator-组件跳转"><a href="#1-使用-navigator-组件跳转" class="headerlink" title="1. 使用 navigator 组件跳转"></a>1. 使用 navigator 组件跳转</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 当前页面跳转并传递数据 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">navigator</span> <span class="attr">url</span>=<span class="string">&quot;navigate/navigate?title=navigate&quot;</span> <span class="attr">hover-class</span>=<span class="string">&quot;navigator-hover&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">&quot;default&quot;</span>&gt;</span>跳转到新页面<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">navigator</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* navigate.vue 页面接受参数 */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    onLoad: <span class="function"><span class="keyword">function</span> (<span class="params">option</span>) </span>&#123; <span class="comment">// option 为 object 类型，会序列化上个页面传递的参数</span></span><br><span class="line">        <span class="built_in">console</span>.log(option.id); <span class="comment">// 打印出上个页面传递的参数。</span></span><br><span class="line">        <span class="built_in">console</span>.log(option.name); <span class="comment">// 打印出上个页面传递的参数。</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h5 id="2-调用-API-跳转"><a href="#2-调用-API-跳转" class="headerlink" title="2. 调用 API 跳转"></a>2. 调用 API 跳转</h5><p>A: <code>uni.navigateTo( object )</code> ( 保留当前页面，跳转到应用内的某个页面，使用 <code>uni.navigateBack</code> 可以返回到原页面。 )</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在起始页面跳转到 test.vue 页面并传递参数</span></span><br><span class="line">uni.navigateTo(&#123;</span><br><span class="line">    url: <span class="string">&#x27;test?id=1&amp;name=uniapp&#x27;</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 在 test.vue 页面接受参数</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    onLoad: <span class="function"><span class="keyword">function</span> (<span class="params">option</span>) </span>&#123; <span class="comment">// option 为 object 类型，会序列化上个页面传递的参数</span></span><br><span class="line">        <span class="built_in">console</span>.log(option.id); <span class="comment">// 打印出上个页面传递的参数。</span></span><br><span class="line">        <span class="built_in">console</span>.log(option.name); <span class="comment">// 打印出上个页面传递的参数。</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>【 注意 】</p>
<ol>
<li>页面跳转路径有层级限制，不能无限制跳转新页面。</li>
<li>跳转到 tabBar 页面只能使用 switchTab 跳转。</li>
<li>路由 API 的目标页面必须是在 pages.json 里注册的 vue 页面。</li>
</ol>
<p>B: <code>uni.redirectTo( object )</code> ( 关闭当前页面，跳转到应用内的某个页面。 )</p>
<p>C: <code>uni.reLaunch( object )</code> ( 关闭所有页面，打开到应用内的某个页面。 )</p>
<p>D: <code>uni.switchTab( object )</code> ( 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 )</p>
<p>E: <code>uni.navigateBack( object )</code> ( 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。 )</p>
<p><code>url</code> 有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量，或 <code>encodeURIComponent</code> 等多种方式解决，如下为 <code>encodeURIComponent</code> 示例。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">navigator</span> <span class="attr">:url</span>=<span class="string">&quot;&#x27;/pages/navigate/navigate?item=&#x27;+ encodeURIComponent(JSON.stringify(item))&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">navigator</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// navigate.vue页面接受参数</span></span><br><span class="line">onLoad: <span class="function"><span class="keyword">function</span> (<span class="params">option</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> item = <span class="built_in">JSON</span>.parse(<span class="built_in">decodeURIComponent</span>(option.item));</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>7. 组件</strong></p>
</blockquote>
<h4 id="1-自定义组件"><a href="#1-自定义组件" class="headerlink" title="1. 自定义组件"></a>1. 自定义组件</h4><p>【 创建自定义组件 】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;template name=<span class="string">&quot;组件名称&quot;</span>&gt;</span><br><span class="line">    &lt;view&gt;</span><br><span class="line">        ......</span><br><span class="line">    &lt;/view&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    name: <span class="string">&quot;组件名称&quot;</span>,</span><br><span class="line">    <span class="comment">//属性</span></span><br><span class="line">    props: &#123;</span><br><span class="line">        属性名称: &#123;</span><br><span class="line">            type: <span class="built_in">String</span>,<span class="comment">//属性类型</span></span><br><span class="line">            value: <span class="string">&quot;值&quot;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        ......</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">//组件生命周期</span></span><br><span class="line">    created:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">    </span><br><span class="line">    &#125;,</span><br><span class="line">    methods: &#123;</span><br><span class="line">        函数名称:<span class="function"><span class="keyword">function</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">        </span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">    组件样式</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<p>【 组件引用 】</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、引用组件</span></span><br><span class="line"><span class="keyword">import</span> 组件名称 <span class="keyword">from</span> <span class="string">&quot;../../components/组件名.vue&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2、注册组件</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span>&#123;</span><br><span class="line">    components:&#123;</span><br><span class="line">        组件名称</span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3、在试图模板中使用组件</span></span><br><span class="line">&lt;组件名称 组件属性=<span class="string">&quot;对应的值&quot;</span>&gt;&lt;/组件名称&gt;</span><br></pre></td></tr></table></figure>

<h4 id="常用组件"><a href="#常用组件" class="headerlink" title="常用组件"></a>常用组件</h4><p>（一）最基础的视图容器：<code>view</code></p>
<p>在 <code>uni-app</code> 里用 <code>view</code> 代替 <code>div</code> 作为基础视图容器，如果你在项目中使用了 <code>div</code> 它也会在编译的时候帮你编译成 <code>view</code>。</p>
<p><code>view</code> 一共有四种属性：</p>
<ol>
<li><code>hover-class</code>：指定按下去的样式类，默认为 none，当其为 none 是没有点击态效果。</li>
<li><code>hover-stop-propagation</code>：指定是否阻止本节点的祖先节点出现点击态，其类型为布尔值，默认值为 false。</li>
<li><code>hover-start-time</code>：按住后多久出现点击态，单位为毫秒，默认为 400ms。</li>
<li><code>hover-stay-time</code>：手指松开后点击态保留的时间，单位为毫秒，默认为 50ms。</li>
</ol>
<p>（二）最基础的表单组件：<code>button</code></p>
<p><code>button</code> 一共有十一种属性：</p>
<ol>
<li><code>size</code>：按钮的大小，它有两个有效值：default，mini。</li>
<li><code>type</code>：按钮的样式类型，它有三个有效值：primary（app下为蓝色，微信小程序下为绿色），default，warn。</li>
<li><code>plain</code>：按钮是否为镂空，背景色透明，默认为 false。</li>
<li><code>disabled</code>：是否禁用按钮，默认为 false。</li>
<li><code>loading</code>：名称前是否带 loading 图标，默认为 false。</li>
<li><code>form-type</code>：用于 <form> 组件，点击分别会触发 <form> 组件的 submit/reset 事件，可选值为 submit/reset。</li>
<li><code>open-type</code>：开放能力，有效值为 feedback，share，getUserInfo。</li>
<li><code>hover-class</code>：指定按下去的样式类，默认为 button-hover，当其为 none 是没有点击态效果，button-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}。</li>
<li><code>hover-start-time</code>：按住后多久出现点击态，单位为毫秒，默认为 20ms。</li>
<li><code>hover-stay-time</code>：手指松开后点击态保留的时间，单位为毫秒，默认为 70ms。</li>
<li><code>@getuserinfo</code>：用户点击该按钮时，会返回获取到的用户信息，从返回参数的 detail 中获取到的值同 uni.getUserInfo，只有在微信小程序下好用。</li>
</ol>
<p>（三）<code>web-view</code></p>
<p>如果以前做过很多 <code>H5</code> 页面想直接把它嵌套到 <code>app</code> 里，那这个组件便派上用场啦。</p>
<p>它的属性一共有三种：</p>
<ol>
<li><code>src</code>：webview 指向网页的链接。</li>
<li><code>webview-styles</code>： webview 的样式。</li>
<li><code>@message</code>： 网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。</li>
</ol>
<p>在 <code>uni-app</code> 项目里，它赋予了 <code>web-view</code> 嵌套的页面一些使用 <code>uni-appAPI</code> 的能力。</p>
<p>首先你要改造一下你的 <code>H5</code> 页面在，<code>H5</code> 页面中引入以下代码:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 微信 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。 --&gt;</span><br><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span> src=<span class="string">&quot;https://res.wx.qq.com/open/js/jweixin-1.4.0.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;!-- 支付宝的 JS-SDK 防止 <span class="number">404</span> 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。 --&gt;</span><br><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt; <span class="keyword">if</span> (navigator.userAgent.indexOf(<span class="string">&#x27;AlipayClient&#x27;</span>) &gt; <span class="number">-1</span>) &#123; <span class="built_in">document</span>.writeln(<span class="string">&#x27;&lt;script src=&quot;https://appx/web-view.min.js&quot;&#x27;</span> + <span class="string">&#x27;&gt;&#x27;</span> + <span class="string">&#x27;&lt;&#x27;</span> + <span class="string">&#x27;/&#x27;</span> + <span class="string">&#x27;script&gt;&#x27;</span>); &#125;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;!-- 百度 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。 --&gt;</span><br><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span> src=<span class="string">&quot;https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-1.7.0.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&lt;!-- uni 的 SDK --&gt;</span><br><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span> src=<span class="string">&quot;https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.2.2.js&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"> <span class="comment">// 待 H5 触发 UniAppJSBridgeReady 事件后，即可调用 uni 的 API。</span></span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line"></span><br><span class="line">    <span class="built_in">document</span>.addEventListener(<span class="string">&#x27;UniAppJSBridgeReady&#x27;</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        uni.postMessage(&#123;<span class="attr">data</span>: &#123;<span class="attr">action</span>: <span class="string">&#x27;message&#x27;</span>&#125;&#125;);</span><br><span class="line">        uni.getEnv(<span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;当前环境：&#x27;</span>+<span class="built_in">JSON</span>.stringify(res));</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;);</span><br><span class="line"></span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<blockquote>
<p><strong>8. 常用 API</strong></p>
</blockquote>
<h4 id="1-uni-app-两种提示框"><a href="#1-uni-app-两种提示框" class="headerlink" title="1. uni-app 两种提示框"></a>1. uni-app 两种提示框</h4><h5 id="A-uni-showToast-Object"><a href="#A-uni-showToast-Object" class="headerlink" title="A. uni.showToast( Object )"></a>A. uni.showToast( Object )</h5><p>@ Object 参数说明</p>
<p><img src="/lemonElf/img/studyImg/uni-app03.webp" alt="uni-app03"></p>
<p>@ icon 值说明</p>
<p><img src="/lemonElf/img/studyImg/uni-app04.webp" alt="uni-app04"></p>
<p>@ 实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">uni.showToast(&#123;</span><br><span class="line">    title: <span class="string">&#x27;标题&#x27;</span>,</span><br><span class="line">    duration: <span class="number">2000</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h5 id="A-uni-showModal-Object"><a href="#A-uni-showModal-Object" class="headerlink" title="A. uni.showModal( Object )"></a>A. uni.showModal( Object )</h5><p>@ 显示模态弹窗，类似于标准 html 的消息框：alert、confirm</p>
<p><img src="/lemonElf/img/studyImg/uni-app05.webp" alt="uni-app05"></p>
<p>@ success 返回参数说明</p>
<p><img src="/lemonElf/img/studyImg/uni-app06.webp" alt="uni-app06"></p>
<p>@ 实例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">uni.showModal(&#123;</span><br><span class="line">    title: <span class="string">&#x27;提示&#x27;</span>,</span><br><span class="line">    content: <span class="string">&#x27;这是一个模态弹窗&#x27;</span>,</span><br><span class="line">    success: <span class="function"><span class="keyword">function</span> (<span class="params">res</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (res.confirm) &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;用户点击确定&#x27;</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (res.cancel) &#123;</span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;用户点击取消&#x27;</span>);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<blockquote>
<p><strong>uni-app 全局变量的几种实现方式</strong></p>
</blockquote>
<h5 id="A-公用模块"><a href="#A-公用模块" class="headerlink" title="A. 公用模块"></a>A. 公用模块</h5><p>定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。</p>
<p>【 注意 】这种方式只支持多个 <code>vue</code> 页面或多个 <code>nvue</code> 页面之间公用，<code>vue</code> 和 <code>nvue</code> 之间不公用。</p>
<p>例如：<br>在 <code>uni-app</code> 项目根目录下创建 <code>common</code> 目录，然后在 <code>common</code> 目录下新建 <code>helper.js</code> 用于定义公用的方法。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> websiteUrl = <span class="string">&#x27;http://uniapp.dcloud.io&#x27;</span>;  </span><br><span class="line"><span class="keyword">const</span> now = <span class="built_in">Date</span>.now || <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Date</span>().getTime();  </span><br><span class="line">&#125;;  </span><br><span class="line"><span class="keyword">const</span> isArray = <span class="built_in">Array</span>.isArray || <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">return</span> obj <span class="keyword">instanceof</span> <span class="built_in">Array</span>;  </span><br><span class="line">&#125;;  </span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;  </span><br><span class="line">    websiteUrl,  </span><br><span class="line">    now,  </span><br><span class="line">    isArray  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>接下来在 <code>pages/index/index.vue</code> 中引用该模块</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;  </span><br><span class="line">    <span class="keyword">import</span> helper <span class="keyword">from</span> <span class="string">&#x27;../../common/helper.js&#x27;</span>;  </span><br><span class="line"></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;  </span><br><span class="line">        data() &#123;  </span><br><span class="line">            <span class="keyword">return</span> &#123;&#125;;  </span><br><span class="line">        &#125;,  </span><br><span class="line">        onLoad()&#123;  </span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;now:&#x27;</span> + helper.now());  </span><br><span class="line">        &#125;,  </span><br><span class="line">        methods: &#123;  </span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;  </span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="comment">// 这种方式维护起来比较方便，但是缺点就是每次都需要引入。</span></span><br></pre></td></tr></table></figure>

<h5 id="B-挂载-Vue-prototype"><a href="#B-挂载-Vue-prototype" class="headerlink" title="B. 挂载 Vue.prototype"></a>B. 挂载 Vue.prototype</h5><p>将一些使用频率较高的常量或者方法，直接扩展到 <code>Vue.prototype</code> 上，每个 <code>Vue</code> 对象都会“ 继承 ”下来。</p>
<p>【 注意 】这种方式只支持 <code>vue</code> 页面</p>
<p>例如：<br>在 <code>main.js</code> 中挂载属性/方法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">Vue.prototype.websiteUrl = <span class="string">&#x27;http://uniapp.dcloud.io&#x27;</span>;  </span><br><span class="line">Vue.prototype.now = <span class="built_in">Date</span>.now || <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Date</span>().getTime();  </span><br><span class="line">&#125;;  </span><br><span class="line">Vue.prototype.isArray = <span class="built_in">Array</span>.isArray || <span class="function"><span class="keyword">function</span> (<span class="params">obj</span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">return</span> obj <span class="keyword">instanceof</span> <span class="built_in">Array</span>;  </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p>然后在 <code>pages/index/index.vue</code> 中调用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;  </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;  </span><br><span class="line">        data() &#123;  </span><br><span class="line">            <span class="keyword">return</span> &#123;&#125;;  </span><br><span class="line">        &#125;,  </span><br><span class="line">        onLoad()&#123;  </span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;now:&#x27;</span> + <span class="built_in">this</span>.now());  </span><br><span class="line">        &#125;,  </span><br><span class="line">        methods: &#123;  </span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;  </span><br><span class="line">&lt;/script&gt;</span><br><span class="line"><span class="comment">// 这种方式，只需要在 main.js 中定义好即可在每个页面中直接调用。</span></span><br></pre></td></tr></table></figure>
<p>【 Tips 】:</p>
<ol>
<li>每个页面中不要在出现重复的属性或方法名。</li>
<li>建议在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。比如 $url、global_url 这样，在阅读代码时也容易与当前页面的内容区分开。</li>
</ol>
<h5 id="C-globalData"><a href="#C-globalData" class="headerlink" title="C. globalData"></a>C. globalData</h5><p>小程序中有个 <code>globalData</code> 概念，可以在 <code>App</code> 上声明全局变量。 <code>Vue</code> 之前是没有这类概念的，但 <code>uni-app</code> 引入了 <code>globalData</code> 概念，并且在包括 <code>H5</code>、<code>App</code> 等平台都实现了。</p>
<p>在 <code>App.vue</code> 可以定义 <code>globalData</code> ，也可以使用 <code>API</code> 读写这个值。</p>
<p><code>globalData</code> 支持 <code>vue</code> 和 <code>nvue</code> 共享数据。</p>
<p><code>globalData</code> 是一种比较简单的全局变量使用方式。</p>
<p>定义：<code>App.vue</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;  </span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;  </span><br><span class="line">        globalData: &#123;  </span><br><span class="line">            text: <span class="string">&#x27;text&#x27;</span>  </span><br><span class="line">        &#125;,  </span><br><span class="line">        onLaunch: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;App Launch&#x27;</span>)  </span><br><span class="line">        &#125;,  </span><br><span class="line">        onShow: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;App Show&#x27;</span>)  </span><br><span class="line">        &#125;,  </span><br><span class="line">        onHide: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">            <span class="built_in">console</span>.log(<span class="string">&#x27;App Hide&#x27;</span>)  </span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;  </span><br><span class="line">&lt;/script&gt;  </span><br><span class="line"></span><br><span class="line">&lt;style&gt;  </span><br><span class="line">    <span class="comment">/*每个页面公共css */</span>  </span><br><span class="line">&lt;/style&gt;  </span><br></pre></td></tr></table></figure>
<p><code>js</code> 中操作 <code>globalData</code> 的方式如下：</p>
<p>【 赋值 】：<code>getApp().globalData.text = &#39;test&#39;</code></p>
<p>【 取值 】：<code>console.log(getApp().globalData.text) // &#39;test&#39;</code></p>
<p>如果需要把 <code>globalData</code> 的数据绑定到页面上，可在页面的 <code>onshow</code> 声明周期里进行变量重赋值。</p>
<h5 id="D-Vuex"><a href="#D-Vuex" class="headerlink" title="D. Vuex"></a>D. Vuex</h5><p><code>Vuex</code> 是一个专为 <code>Vue.js</code> 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> store = <span class="keyword">new</span> Vuex.Store(&#123;  </span><br><span class="line">    state: &#123;  </span><br><span class="line">        login: <span class="literal">false</span>,  </span><br><span class="line">        token: <span class="string">&#x27;&#x27;</span>,  </span><br><span class="line">        avatarUrl: <span class="string">&#x27;&#x27;</span>,  </span><br><span class="line">        userName: <span class="string">&#x27;&#x27;</span>  </span><br><span class="line">    &#125;,  </span><br><span class="line">    mutations: &#123;  </span><br><span class="line">        login(state, provider) &#123;  </span><br><span class="line">            <span class="built_in">console</span>.log(state)  </span><br><span class="line">            <span class="built_in">console</span>.log(provider)  </span><br><span class="line">            state.login = <span class="literal">true</span>;  </span><br><span class="line">            state.token = provider.token;  </span><br><span class="line">            state.userName = provider.userName;  </span><br><span class="line">            state.avatarUrl = provider.avatarUrl;  </span><br><span class="line">        &#125;,  </span><br><span class="line">        logout(state) &#123;  </span><br><span class="line">            state.login = <span class="literal">false</span>;  </span><br><span class="line">            state.token = <span class="string">&#x27;&#x27;</span>;  </span><br><span class="line">            state.userName = <span class="string">&#x27;&#x27;</span>;  </span><br><span class="line">            state.avatarUrl = <span class="string">&#x27;&#x27;</span>;  </span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;  </span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>然后，需要在 <code>main.js</code> 挂载 <code>Vuex</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> store <span class="keyword">from</span> <span class="string">&#x27;./store&#x27;</span>  </span><br><span class="line">Vue.prototype.$store = store</span><br></pre></td></tr></table></figure>
<p>最后，在 <code>pages/index/index.vue</code> 使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;  </span><br><span class="line">    <span class="keyword">import</span> &#123;  </span><br><span class="line">        mapState,  </span><br><span class="line">        mapMutations  </span><br><span class="line">    &#125; <span class="keyword">from</span> <span class="string">&#x27;vuex&#x27;</span>;  </span><br><span class="line"></span><br><span class="line">    <span class="keyword">export</span> <span class="keyword">default</span> &#123;  </span><br><span class="line">        computed: &#123;  </span><br><span class="line">            ...mapState([<span class="string">&#x27;avatarUrl&#x27;</span>, <span class="string">&#x27;login&#x27;</span>, <span class="string">&#x27;userName&#x27;</span>])  </span><br><span class="line">        &#125;,  </span><br><span class="line">        methods: &#123;  </span><br><span class="line">            ...mapMutations([<span class="string">&#x27;logout&#x27;</span>])  </span><br><span class="line">        &#125;  </span><br><span class="line">    &#125;  </span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h5 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h5><p><code>.vue</code> 和 <code>.nvue</code> 并不是一个规范，因此一些在 <code>.vue</code> 中适用的方案并不适用于 <code>.nvue</code>。<br><code>Vue</code> 上挂载属性，不能在 <code>.nvue</code> 中使用。</p>
<blockquote>
<p><strong>关于样式</strong></p>
</blockquote>
<p><code>uni-app</code> 因为要适配不同端，所以使用的布局方式都是 <code>flex</code> 布局，。</p>
<p>在 <code>uni-app</code> 里都是使用 <code>upx</code> 来代替 <code>px</code> 作为单位的。</p>
<p><code>upx</code> 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。</p>
<p><code>uni-app</code> 规定屏幕基准宽度 <code>750upx</code>。另外页面元素宽度在 <code>uni-app</code> 中的宽度计算公式为：<code>750 * 元素在设计稿中的宽度 / 设计稿基准宽度</code></p>
<blockquote>
<p><strong>条件编译</strong></p>
</blockquote>
<p>这也是 <code>uni-app</code> 的一大亮点，有了它可以在你的项目里优雅的实现平台个性化。</p>
<p>条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。</p>
<p>【 写法 】：以 <code>#ifdef</code> 或 <code>#ifndef</code> 加 <code>%PLATFORM%</code> 开头，以 <code>#endif</code> 结尾。</p>
<p>【 %PLATFORM% 】 的可选值为：<br><code>APP-PLUS（5+APP）</code><br><code>APP-PLUS-NVUE（5+app，nvue）</code><br><code>H5（H5）</code><br><code>MP-WEIXIN（微信小程序）</code><br><code>MP-ALIPAY（支付宝小程序）</code><br><code>MP-BAIDU（百度小程序）</code><br><code>MP（微信小程序/支付宝小程序/百度小程序）</code></p>

          
            <div class='article_footer'>
              
                
  

  

  

  


              
            </div>
          
        </div>
        
          


  <section class='meta' id="footer-meta">
    <div class='new-meta-box'>
      
        
          <div class="new-meta-item date" itemprop="dateUpdated" datetime="2020-08-13T23:41:53+08:00">
  <a class='notlink'>
    <i class="fas fa-edit fa-fw" aria-hidden="true"></i>
    <p>更新于：2020-08-13</p>
  </a>
</div>

        
      
        
          
  
  <div class="new-meta-item meta-tags"><a class="tag" href="/lemonelf/tags/uni-app/" rel="nofollow"><i class="fas fa-hashtag fa-fw" aria-hidden="true"></i><p>uni-app</p></a></div>


        
      
        
          

        
      
        
          
  <div class="new-meta-item share -mob-share-list">
  <div class="-mob-share-list share-body">
    
      
        <a class="-mob-share-qq" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF/&title=uni-app 开发之路 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=Everything goes back to the way it was."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png">
          
        </a>
      
    
      
        <a class="-mob-share-qzone" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF/&title=uni-app 开发之路 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=Everything goes back to the way it was."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png">
          
        </a>
      
    
      
        <a class="-mob-share-weibo" title="" rel="external nofollow noopener noreferrer noopener"
          
          target="_blank" href="http://service.weibo.com/share/share.php?url=https://missglobefish.gitee.io/lemonelf/2020/08/13/uni-app%20%E5%BC%80%E5%8F%91%E4%B9%8B%E8%B7%AF/&title=uni-app 开发之路 - 河豚吞吞&pics=https://img.vim-cn.com/17/0c7b02722686d1527a1df807dae0794d995860.png&summary=Everything goes back to the way it was."
          
          >
          
            <img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png">
          
        </a>
      
    
  </div>
</div>



        
      
    </div>
  </section>


        
        
          <div class="prev-next">
            
              <a class='prev' href='/lemonelf/2020/08/13/uni-app%20&%20vueJs/'>
                <p class='title'><i class="fas fa-chevron-left" aria-hidden="true"></i>uni-app & vue.js 生命周期</p>
                <p class='content'>Never be afraid to reach for the stars, because even if you fall, you’ll always be wearing a pare...</p>
              </a>
            
            
              <a class='next' href='/lemonelf/2020/08/13/Vuex%20%E8%AE%BE%E8%AE%A1%E6%80%9D%E8%B7%AF%E5%8F%8A%E5%AE%9E%E7%8E%B0/'>
                <p class='title'>Vuex 设计思路及实现<i class="fas fa-chevron-right" aria-hidden="true"></i></p>
                <p class='content'>Everything goes back to the way it was.


（一）Vuex 是什么？Vuex 是专门为 Vue.js 应用程序设计的 状态管理工具。
它采用集中式存储管理...</p>
              </a>
            
          </div>
        
      </section>
    </article>
  




<!-- 根据页面mathjax变量决定是否加载MathJax数学公式js -->


</div>
<aside class='l_side'>
  
  

  
    
    



  <section class="widget toc-wrapper shadow desktop mobile" id="toc-div" >
    
  <header>
    
      <i class="fas fa-list fa-fw" aria-hidden="true"></i><span class='name'>本文目录</span>
    
  </header>


    <div class='content'>
        <ol class="toc"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E9%80%9A%E8%BF%87-HBuilderX-%E5%8F%AF%E8%A7%86%E5%8C%96%E7%95%8C%E9%9D%A2"><span class="toc-text">1. 通过 HBuilderX 可视化界面</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E5%88%9B%E5%BB%BA-uni-app"><span class="toc-text">2. 创建 uni-app</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-%E8%BF%90%E8%A1%8C-uni-app"><span class="toc-text">3. 运行 uni-app</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#4-%E5%8F%91%E5%B8%83-uni-app"><span class="toc-text">4. 发布 uni-app</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-text">1. 应用生命周期</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E9%A1%B5%E9%9D%A2%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-text">2. 页面生命周期</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F"><span class="toc-text">3. 组件生命周期</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#1-getApp"><span class="toc-text">1. getApp()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-getCurrentPages"><span class="toc-text">2. getCurrentPages()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#3-getAppWebview"><span class="toc-text">3. $getAppWebview()</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#1-%E4%BD%BF%E7%94%A8-navigator-%E7%BB%84%E4%BB%B6%E8%B7%B3%E8%BD%AC"><span class="toc-text">1. 使用 navigator 组件跳转</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#2-%E8%B0%83%E7%94%A8-API-%E8%B7%B3%E8%BD%AC"><span class="toc-text">2. 调用 API 跳转</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6"><span class="toc-text">1. 自定义组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6"><span class="toc-text">常用组件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#1-uni-app-%E4%B8%A4%E7%A7%8D%E6%8F%90%E7%A4%BA%E6%A1%86"><span class="toc-text">1. uni-app 两种提示框</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#A-uni-showToast-Object"><span class="toc-text">A. uni.showToast( Object )</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#A-uni-showModal-Object"><span class="toc-text">A. uni.showModal( Object )</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#A-%E5%85%AC%E7%94%A8%E6%A8%A1%E5%9D%97"><span class="toc-text">A. 公用模块</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#B-%E6%8C%82%E8%BD%BD-Vue-prototype"><span class="toc-text">B. 挂载 Vue.prototype</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#C-globalData"><span class="toc-text">C. globalData</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#D-Vuex"><span class="toc-text">D. Vuex</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9"><span class="toc-text">注意事项</span></a></li></ol>
    </div>
  </section>


  


</aside>



    </div>
    
  
  <footer class="clearfix">
    <br><br>
    
      
        <div class="aplayer-container">
          

  
    <meting-js
      theme='#1BCDFC'
      autoplay='false'
      volume='0.7'
      loop='all'
      order='list'
      fixed='false'
      list-max-height='320px'
      server='netease'
      type='playlist'
      id='3175833810'
      list-folded='true'>
    </meting-js>
  


        </div>
      
    
      
        <br>
        <div class="social-wrapper">
          
            
              <a href="https://missglobefish.github.io/"
                class="social fas fa-rss flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://missglobefish.github.io/"
                class="social fas fa-envelope flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://gitee.com/MissGlobeFish"
                class="social fab fa-github flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
            
              <a href="https://music.163.com/#/user/home?id=63035382"
                class="social fas fa-headphones-alt flat-btn"
                target="_blank"
                rel="external nofollow noopener noreferrer">
              </a>
            
          
        </div>
      
    
      
        <div><p>Blog content follows the <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en">Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License</a></p>
</div>
      
    
      
        Use
        <a href="https://volantis.js.org/" target="_blank" class="codename">Volantis</a>
        as theme, total visits
          <span id="busuanzi_value_site_pv"><i class="fas fa-circle-notch fa-spin fa-fw" aria-hidden="true"></i></span>
          times
        
      
    
      
        <div class='copyright'>
        <p><a href="/">Copyright © 2017-2020 XXX</a></p>

        </div>
      
    
  </footer>


    <a class="s-top fas fa-arrow-up fa-fw" href='javascript:void(0)'></a>
  </div>
  <div>
    
      
  

  <div id="rightmenu-wrapper">
    <ul class="list-v rightmenu" id="rightmenu-content">
      <li class='option'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-text' onclick='document.execCommand("copy")'><i class='fa fa-copy fa-fw'></i>Copy Text</a>
        <hr id='hr-text'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-href'><i class='fa fa-link fa-fw'></i>Copy Link</a>
        <a class='vlts-menu opt fix-cursor-default' id='menu-open-href'><i class='fa fa-external-link-square-alt fa-fw'></i>Open Link in New Tab</a>
        <hr id='hr-href'>
        <a class='vlts-menu opt fix-cursor-default' id='menu-copy-src'><i class='fa fa-image fa-fw'></i>Copy Image Link</a>
        <hr id='hr-src'>
      </li>
      <li class='navigation'>
        <a class='nav icon-only fix-cursor-default' onclick='history.back()'><i class='fa fa-arrow-left fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' onclick='history.forward()'><i class='fa fa-arrow-right fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' onclick='window.location.reload()'><i class='fa fa-redo fa-fw'></i></a>
        <a class='nav icon-only fix-cursor-default' href='/'><i class='fa fa-home fa-fw'></i></a>
      </li>
      <hr>
      
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://gitee.com/MissGlobeFish/lemonElf
        
        
        
        
          id="https:giteecomMissGlobeFishlemonElf"
        >
        <i class='fas fa-envelope fa-fw'></i> 提出问题
      </a>
    </li>
  
        
      
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://missglobefish.github.io/
        
        
        
        
          id="https:missglobefishgithubio"
        >
        <i class='fa fa-fan fa-spin fa-fw'></i> 生活博客
      </a>
    </li>
  
        
      
        
          <hr>
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' href=https://gitee.com/MissGlobeFish/lemonElf
        
        
        
        
          id="https:giteecomMissGlobeFishlemonElf"
        >
        <i class='fa fa-code-branch fa-fw'></i> 本站源码
      </a>
    </li>
  
        
      
        
      
        
          <hr>
        
      
        
          
    <li>
      <a class='vlts-menu fix-cursor-default' 
        
        
        
          onclick="document.execCommand('print')"
        
        >
        <i class='fa fa-print fa-fw'></i> 打印页面
      </a>
    </li>
  
        
      
        
          <hr>
        
      
        
          <li class='music name'>
            <p class='nav music-title fix-cursor-default'></p>
          </li>
          <li class='music ctrl'>
            <a class='nav icon-only backward fix-cursor-default' onclick='aplayerBackward()'><i class='fa fa-step-backward fa-fw'></i></a>
            <a class='nav icon-only toggle fix-cursor-default' onclick='aplayerToggle()'><i class='fa fa-play fa-fw'></i></a>
            <a class='nav icon-only forward fix-cursor-default' onclick='aplayerForward()'><i class='fa fa-step-forward fa-fw'></i></a>
          </li>
          <li class='music volume'>
            <a class='nav volume'>
              <div class="aplayer-volume-bar-wrap">
                <div class="aplayer-volume-bar fix-cursor-pointer">
                  <div class="aplayer-volume"></div>
                  <i class='left fa fa-volume-off fa-fw'></i>
                  <i class='right fa fa-volume-up fa-fw'></i>
                </div>
              </div>
            </a>
          </li>
        
      
    </ul>
  </div>

  <script>
    window.document.oncontextmenu = function (event) {
      if (event.ctrlKey) return true;
      if (/Android|webOS|BlackBerry/i.test(navigator.userAgent)) return true;
      return popMenu(event);
    };
    document.addEventListener("click", function (event) {
      var mymenu = document.getElementById('rightmenu-wrapper');
      mymenu.style.display = "none";
    });
    function popMenu(event) {
      var mymenu = document.getElementById('rightmenu-wrapper');
      var menuContent = document.getElementById('rightmenu-content');
      var screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
      var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;
      mymenu.style.left = event.clientX + "px"; // 获取鼠标位置
      mymenu.style.top = event.clientY + "px";
      mymenu.style.display = 'block';
      if (event.clientX * 2 > screenWidth) {
        menuContent.classList.add('left');
      } else {
        menuContent.classList.remove('left');
      }
      if (event.clientY * 2 > screenHeight) {
        menuContent.classList.add('top');
      } else {
        menuContent.classList.remove('top');
      }

      let hrText = document.getElementById('hr-text');
      let hrSrc = document.getElementById('hr-src');
      let hrHref = document.getElementById('hr-href');

      // 选中图片
      let copySrc = document.getElementById('menu-copy-src');
      if (copySrc != undefined) {
        if (event.target.currentSrc) {
          copySrc.style.display = 'block';
          copySrc.addEventListener("click", function (e) {
            copyString(event.target.currentSrc);
          },{once: true});
          hrSrc.style.display = 'block';
        } else {
          copySrc.style.display = 'none';
          hrSrc.style.display = 'none';
        }
      }

      // 选中按钮
      // 判断是不是按钮
      let href = '';
      if (event.path) {
        for (i = 0; i < event.path.length; i++) {
          if (event.path[i].href != undefined && event.path[i].href.length > 0) {
            href = event.path[i].href;
          }
        }
      }

      let copyText = document.getElementById('menu-copy-text');
      copyText.style.display = 'none';
      hrText.style.display = 'none';
      if (href.length == 0) {
        // 选中文本
        if (window.getSelection().toString()) {
          copyText.style.display = 'block';
          hrText.style.display = 'block';
        }
      }

      // 在新标签页打开
      let openHref = document.getElementById('menu-open-href');
      if (openHref != undefined) {
        if (href.length > 0) {
          openHref.style.display = 'block';
          openHref.addEventListener("click", function (e) {
            window.open(href);
          },{once: true});
          hrHref.style.display = 'block';
        } else {
          openHref.style.display = 'none';
          hrHref.style.display = 'none';
        }
      }
      // 复制链接
      let copyHref = document.getElementById('menu-copy-href');
      if (copyHref != undefined) {
        if (href.length > 0) {
          copyHref.style.display = 'block';
          copyHref.addEventListener("click", function (e) {
            copyString(href);
          },{once: true});
        } else {
          copyHref.style.display = 'none';
        }
      }

      // 有音乐播放器
      if (true == true) {
        // 如果有aplayer，初始化一下
      	try {
      		checkAPlayer();
          updateTitle();
      	} catch (error) {
      		console.log(error);
      	}
      }

      return false; // 该行代码确保系统自带的右键菜单不会被调出
    }
    function hideMenu() {
      document.getElementById('rightmenu-wrapper').style.display = 'none';
    }
    function copyString(str) {
      const input = document.createElement('input');
      input.setAttribute('readonly', 'readonly');
      document.body.appendChild(input);
      input.setAttribute('value', str);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
    }
    document.execCommand('click');
  </script>


    
    
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5/dist/jquery.min.js"></script>



  <script>
    
    var SEARCH_SERVICE = "hexo" || "hexo";
    var ROOT = "/lemonelf/" || "/";
    if (!ROOT.endsWith('/')) ROOT += '/';
  </script>





  <script async src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>



  
  
  
    
<script src="https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js"></script>

    <script type="text/javascript">
      $(function(){
        var imgs=["https://gitee.com/wallpapers/minimalist/raw/master/2020/001.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/002.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/003.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/004.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/005.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/006.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/012.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/016.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/019.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/025.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/033.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/034.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/035.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/038.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/039.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/042.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/042.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/046.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/051.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/052.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/054.jpg", "https://gitee.com/wallpapers/minimalist/raw/master/2020/056.jpg"];
        if ('true' == 'true') {
          function shuffle(arr){
            /*From countercurrent-time*/
            var n = arr.length;
            while(n--) {
              var index = Math.floor(Math.random() * n);
              var temp = arr[index];
              arr[index] = arr[n];
              arr[n] = temp;
            }
          }
          shuffle(imgs);
        }
        if ('.cover') {
          $('.cover').backstretch(
            imgs,
          {
            duration: "20000",
            fade: "1500"
          });
        } else {
          $.backstretch(
            imgs,
          {
            duration: "20000",
            fade: "1500"
          });
        }
      });
    </script>
  



  <script>
    let APlayerController = new Object();
    APlayerController.id = '3175833810';  // 设定全局音乐播放ID
    APlayerController.volume = '0.7';
  </script>
  
    
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>

  
    
<script src="https://cdn.jsdelivr.net/npm/meting@2.0/dist/Meting.min.js"></script>

  




  
  
<script src="/lemonelf/js/valine.js"></script>


<script>
  var GUEST_INFO = ['nick', 'mail', 'link'];
  var meta = 'nick,mail,link'.split(',').filter(function (item) {
    return GUEST_INFO.indexOf(item) > -1
  });
  var REQUIRED_FIELDS = ['nick', 'mail', 'link'];
  var requiredFields = 'nick,mail'.split(',').filter(function (item) {
    return REQUIRED_FIELDS.indexOf(item) > -1
  });

  function emoji(path, idx, ext) {
    return path + "/" + path + "-" + idx + "." + ext;
  }

  var emojiMaps = {};
  for (var i = 1; i <= 54; i++) {
    emojiMaps['tieba-' + i] = emoji('tieba', i, 'png');
  }
  for (var i = 1; i <= 101; i++) {
    emojiMaps['qq-' + i] = emoji('qq', i, 'gif');
  }
  for (var i = 1; i <= 116; i++) {
    emojiMaps['aru-' + i] = emoji('aru', i, 'gif');
  }
  for (var i = 1; i <= 125; i++) {
    emojiMaps['twemoji-' + i] = emoji('twemoji', i, 'png');
  }
  for (var i = 1; i <= 4; i++) {
    emojiMaps['weibo-' + i] = emoji('weibo', i, 'png');
  }

  function pjax_valine() {
    var valinePath = $.trim($('#valine-path').text()) === "none" ?
            window.location.pathname : $.trim($('#valine-path').text());

    var valinePlaceholder = $.trim($('#valine-placeholder').text()) === "none" ?
            "快来评论吧~" : $.trim($('#valine-placeholder').text());

    var ALLPATH = '';
    if(ALLPATH != '') valinePath = ALLPATH;

    var valine = new Valine();
    valine.init({
      el: '#valine_container',
      meta: meta,
      placeholder: valinePlaceholder,
      path: valinePath,
      appId: "",
      appKey: "",
      pageSize: '10',
      avatar: 'robohash',
      lang: 'zh-cn',
      visitor: 'true',
      highlight: 'true',
      mathJax: 'false',
      enableQQ: 'true',
      requiredFields: requiredFields,
      emojiCDN: 'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/valine/',
      emojiMaps: emojiMaps
    })
  }

  $(function () {
    pjax_valine();
  });
</script>




<!-- darkmodejs -->


<!-- 复制 -->

  <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
    var clipboard = new ClipboardJS('.btn-copy', {
        target: function (trigger) {
            return trigger.nextElementSibling
        }
    });
    function wait(callback, seconds) {
        var timelag = null;
        timelag = window.setTimeout(callback, seconds)
    }
    function pjax_initCopyCode() {
        var copyHtml = '';
        copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
        copyHtml += '<i class="fas fa-copy"></i><span>COPY</span>';
        copyHtml += '</button>';
        $(".highlight .code pre").before(copyHtml);
        $(".article pre code").before(copyHtml);
        clipboard.off('success').on('success', function (e) {
            let $btn = $(e.trigger);
            $btn.addClass('copied');
            let $icon = $($btn.find('i'));
            $icon.removeClass('fa-copy');
            $icon.addClass('fa-check-circle');
            let $span = $($btn.find('span'));
            $span[0].innerText = 'COPIED';
            wait(function () {
                $icon.removeClass('fa-check-circle');
                $icon.addClass('fa-copy');
                $span[0].innerText = 'COPY'
            }, 2000)
        });
        clipboard.off('error').on('error', function (e) {
            e.clearSelection();
            let $btn = $(e.trigger);
            $btn.addClass('copy-failed');
            let $icon = $($btn.find('i'));
            $icon.removeClass('fa-copy');
            $icon.addClass('fa-times-circle');
            let $span = $($btn.find('span'));
            $span[0].innerText = 'COPY FAILED';
            wait(function () {
                $icon.removeClass('fa-times-circle');
                $icon.addClass('fa-copy');
                $span[0].innerText = 'COPY'
            }, 2000)
        })
    }
    $(function () {
        pjax_initCopyCode()
    });
</script>


<!-- scrollreveal -->

<!-- ******************************** -->

<!-- fancybox -->
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script>
  function pjax_fancybox() {
    $(".article-entry").find("img").not('.inline').not('a img').each(function () { //渲染 fancybox
      var element = document.createElement("a"); // a 标签
      $(element).attr("class", "fancybox");
      $(element).attr("pjax-fancybox", "");  // 过滤 pjax
      $(element).attr("href", $(this).attr("src"));
      if ($(this).attr("data-original")) {
        $(element).attr("href", $(this).attr("data-original"));
      }
      $(element).attr("data-fancybox", "images");
      var caption = "";   // 描述信息
      if ($(this).attr('alt')) {  // 判断当前页面是否存在描述信息
        $(element).attr('data-caption', $(this).attr('alt'));
        caption = $(this).attr('alt');
      }
      var div = document.createElement("div");
      $(div).addClass("fancybox");
      $(this).wrap(div); // 最外层套 div ，其实主要作用还是 class 样式
      var span = document.createElement("span");
      $(span).addClass("image-caption");
      $(span).text(caption); // 加描述
      $(this).after(span);  // 再套一层描述
      $(this).wrap(element);  // 最后套 a 标签
    })
    $(".article-entry").find("img").fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
      closeClick: true,
      helpers: {
        overlay: {closeClick: true}
      },
      buttons: [
        "zoom",
        "close"
      ]
    });
  };
  $(function () {
    pjax_fancybox();
  });
</script>

<!-- ******************************** -->


  
<script src="/lemonelf/js/app.js"></script>




  
    
<script src="/lemonelf/js/search.js"></script>

  



  <script defer src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js" data-pjax></script>



  
<script src="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js"></script>

  <script type="text/javascript">
    $(function () {
      Waves.attach('.flat-btn', ['waves-button']);
      Waves.attach('.float-btn', ['waves-button', 'waves-float']);
      Waves.attach('.float-btn-light', ['waves-button', 'waves-float', 'waves-light']);
      Waves.attach('.flat-box', ['waves-block']);
      Waves.attach('.float-box', ['waves-block', 'waves-float']);
      Waves.attach('.waves-image');
      Waves.init();
    });
  </script>



  
<script src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/comment_typing.js"></script>







    
      


<script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.min.js"></script>

<!-- 样式位于：source/css/_third-party/pjaxanimate.styl -->

<div class="pjax-animate">
  
    <script src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>
    <div id="loading-bar-wrapper"><script>NProgress.configure({parent:"#loading-bar-wrapper",trickleSpeed: 100})</script></div>
    <script>
      window.ShowLoading = function() {
        NProgress.start();
      };
      window.HideLoading = function() {
        NProgress.done();
      }
    </script>
  
</div>

<script>
    var pjax;
    document.addEventListener('DOMContentLoaded', function () {
      pjax = new Pjax({
        elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([pjax-fancybox])',
        selectors: [
          "title",
          "#pjax-container",
          "#pjax-header-nav-list"
        ],
        cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
        timeout: 5000
      });
    });

    document.addEventListener('pjax:send', function (e) {
      window.stop(); // 相当于点击了浏览器的停止按钮

      try {
        var currentUrl = window.location.pathname;
        var targetUrl = e.triggerElement.href;
        var banUrl = [""];
        if (banUrl[0] != "") {
          banUrl.forEach(item => {
            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
              window.location.href = targetUrl;
            }
          });
        }
      } catch (error) {}

      window.subData = null; // 移除标题（用于一二级导航栏切换处）
      $.fancybox.close();    // 关闭弹窗
      $('.nav-main').find('.list-v').not('.menu-phone').css("display","none"); // 移除小尾巴
      $('.menu-phone.list-v').css("display","none"); // 移除小尾巴
      $('.l_header .switcher .s-search').removeClass('active'); // 关闭移动端激活的搜索框
      $('.l_header').removeClass('z_search-open'); // 关闭移动端激活的搜索框
      $('.wrapper').removeClass('sub'); // 跳转页面时关闭二级导航

      $('.s-top').unbind('click');   // 解绑
      $('.menu a').unbind('click');  // 解绑
      $(window).unbind('resize');    // 解绑
      $(window).unbind('scroll');    // 解绑
      $(document).unbind('scroll');  // 解绑
      $(document).unbind('click');   // 解绑
      $('body').unbind('click');     // 解绑
      window.ShowLoading();
    });

    document.addEventListener('pjax:complete', function () {
      // 关于百度统计对 SPA 页面的处理：
      // 方案一：百度统计>管理>单页应用设置中，打开开启按钮即可对SPA进行统计。 https://tongji.baidu.com/web/help/article?id=324
      // 方案二：取消注释下列代码。 https://tongji.baidu.com/web/help/article?id=235
      // 

      // 关于谷歌统计对 SPA 页面的处理：
      // 当应用以动态方式加载内容并更新地址栏中的网址时，也应该更新通过 gtag.js 存储的网页网址。
      // https://developers.google.cn/analytics/devguides/collection/gtagjs/single-page-applications?hl=zh-cn
      

      $('.nav-main').find('.list-v').not('.menu-phone').removeAttr("style",""); // 移除小尾巴的移除
      $('.menu-phone.list-v').removeAttr("style",""); // 移除小尾巴的移除
      $('script[data-pjax], .pjax-reload script').each(function () {
        $(this).parent().append($(this).remove());
      });

      try{
        pjax_fancybox();
        
          
          if ('.cover') {
            $('.cover').backstretch("resize");
          } else {
            $.backstretch("resize");
          }
        
        
        
        
          pjax_initCopyCode();
        
        
          pjax_valine();
        
        
        
        
        
      } catch (e) {
        console.log(e);
      }
      window.HideLoading();
    });

    document.addEventListener('pjax:error', function (e) {
      window.HideLoading();
      window.location.href = e.triggerElement.href;
    });
</script>

    
  </div>
</body>
</html>
